<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import {
  ShoppingCart,
  CollectionTag,
  QuestionFilled,
  CaretBottom,
} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { useI18n } from "vue-i18n";
const I18n = useI18n();
const { locale } = useI18n();

const router = useRouter();
const route = useRoute();
const id = ref(parseInt(route.query.id));

const product = ref({});

// 跳转页面
const jumpTo = (path) => {
  router.push(path);
};

const productImages = ["/img/v2_smj2r4.png", "/img/v2_smj319.png"];

const colors = ["银灰色", "绿色"];
const sizes = ["2X2", "2X3", "3X3", "3X4", "3X5"];
const coupons = [
  {
    name: "满300减20",
    type: 1,
  },
  {
    name: "满1000减100",
    type: 1,
  },
];

const selectedColor = ref(colors[0]); // 默认选中第一个颜色
const selectedSize = ref(sizes[0]); // 默认选中第一个尺寸

// 切换颜色
const selectColor = (color) => {
  selectedColor.value = color;
};

// 切换尺寸
const selectSize = (size) => {
  selectedSize.value = size;
};

// 当前选中的tab
let menuActive = ref(0);

// 修改menu
const changeMenu = (val) => {
  menuActive.value = val;
};

// 产品详情
let productDetail = `<img src="/img/v2_smryy0.png"/>`;

// 产品列表
const productList = ref([]);
const attrs = ref([]);
const getProductDetail = async () => {
  try {
    const res = await axios.get(`${apiUrl}/product/detail/${id.value}`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      attrs.value = res.data.data.productAttr.map((item) => item.attr_values[0]);
      res.data.data.storeInfo.slider_image2 = [...res.data.data.storeInfo.slider_image];
      for (const key in res.data.data.productValue) {
        res.data.data.storeInfo.slider_image.push(res.data.data.productValue[key].image);
      }
      product.value = res.data.data;
      product.value.id = id.value;
    }
  } catch (e) {}
};

// 添加到购物车
const addCar = (product) => {
  for (let i = 0; i < productList.value.length; i++) {
    const element = productList.value[i];
    if (element.id === product.id) {
      element.isInCar = !element.isInCar;
    }
  }
};

// 数量
const num = ref(1);
const stopT = ref(false);
const selectedIndex = ref(0);
// 切换选中项
const selectItem = (index) => {
  selectedIndex.value = index;
  stopT.value = true;
  if (index == 0) {
    window.scrollTo({
      top: 0, // 滚动到顶部
      behavior: "smooth", // 平滑滚动
    });
  }
  if (index == 1) {
    window.scrollTo({
      top: 1005, // 滚动到顶部
      behavior: "smooth", // 平滑滚动
    });
  }
  if (index == 2) {
    window.scrollTo({
      top: 1405, // 滚动到顶部
      behavior: "smooth", // 平滑滚动
    });
  }
  if (index == 3) {
    window.scrollTo({
      top: 1605, // 滚动到顶部
      behavior: "smooth", // 平滑滚动
    });
  }
  if (index == 4) {
    window.scrollTo({
      top: 2705, // 滚动到顶部
      behavior: "smooth", // 平滑滚动
    });
  }

  setTimeout(() => {
    stopT.value = false;
  }, 1000);
};

const collectionProductList = ref([]);
const getCollectionProductList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/collect/user?page=1&limit=100`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      collectionProductList.value = res.data.data.list;
    }
  } catch (e) {}
};

const inCollection = (product) => {
  for (let i = 0; i < collectionProductList.value.length; i++) {
    const element = collectionProductList.value[i];
    if (element.product_id === product.id) {
      return true;
    }
  }
  return false;
};

const addCollection = async (product) => {
  try {
    const res = await axios.post(
      `${apiUrl}/collect/add`,
      { id: product.id, product: "product" },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );
    getCollectionProductList();
  } catch (e) {}
};

const delCollection = async (product) => {
  try {
    const res = await axios.post(
      `${apiUrl}/collect/del`,
      { id: product.id, product: "product" },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );
    getCollectionProductList();
  } catch (e) {}
};

const recommendedProductList = ref([]);
const getRecommendedProductList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/groom/list/1?page=1&limit=12`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      recommendedProductList.value = res.data.data.list;
    }
  } catch (e) {}
};

const addToCart = async () => {
  try {
    const selectedProduct = product.value.productValue[attrs.value.join(",")];
    const res = await axios.post(
      `${apiUrl}/cart/add`,
      {
        productId:
          product.value.productAttr.length > 0
            ? selectedProduct.product_id.toString()
            : product.value.storeInfo.id.toString(),
        cartNum: num.value,
        new: 0,
        uniqueId: product.value.productAttr.length > 0 ? selectedProduct.unique : "",
        virtual_type: 0,
      },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      ElMessage({
        message: "已加入购物车",
        type: "success",
      });
      num.value = 1;
    }
  } catch (e) {
    console.log(e, 888);
  }
};

const buyNow = async () => {
  try {
    const selectedProduct =
      product.value.productAttr.length > 0
        ? product.value.productValue[attrs.value.join(",")]
        : product.value.storeInfo.id;
    const res = await axios.post(
      `${apiUrl}/cart/add`,
      {
        productId:
          product.value.productAttr.length > 0
            ? selectedProduct.product_id.toString()
            : product.value.storeInfo.id.toString(),
        cartNum: num.value,
        new: 1,
        uniqueId: product.value.productAttr.length > 0 ? selectedProduct.unique : "",
        virtual_type: 0,
      },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      jumpTo("/order?cartId=" + res.data.data.cartId + "&new=1");
    }
  } catch (e) {}
};

const receiveCoupon = async (id) => {
  try {
    const res = await axios.post(
      `${apiUrl}/coupon/receive`,
      { couponId: id },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    } else {
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
    }
  } catch (e) {}
};
const reply = ref({ type: 0 });
const replyInfo = ref(null);
const getReplyInfo = async () => {
  try {
    const res = await axios.get(`${apiUrl}/reply/config/` + id.value, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      replyInfo.value = res.data.data;
    } else {
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
    }
  } catch (e) {}
};

const replyList = ref([]);
const getReplyList = async () => {
  try {
    const res = await axios.get(
      `${apiUrl}/reply/list/${id.value}?page=1&limit=200&type=${reply.value.type}`,
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      replyList.value = res.data.data;
    } else {
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
    }
  } catch (e) {}
};

const replyTypeChange = (type) => {
  reply.value.type = type;
  getReplyList();
};

const carouselRef = ref(null);

// 切换到第 n 张（从 0 开始）
const goToSlide = (n) => {
  if (carouselRef.value) {
    carouselRef.value.setActiveItem(n);
  }
};

const selectAttr = (oindex, item) => {
  attrs.value[oindex] = item.attr;
  const image = product.value.productValue[attrs.value.join(",")].image;
  Object.keys(product.value.productValue).forEach((key, index) => {
    if (key === attrs.value.join(",")) {
      const ooindex = product.value.storeInfo.slider_image2.length + index;
      goToSlide(ooindex);
    }
  });
};

onMounted(() => {
  getProductDetail();
  getReplyInfo();
  getReplyList();
  getCollectionProductList();
  getRecommendedProductList();
});

watch(
  () => route.query,
  async (newQuery, oldQuery) => {
    id.value = parseInt(newQuery.id);
    getProductDetail();
  },
  { deep: true, immediate: true }
);
</script>
<template>
  <div class="productPage" v-if="JSON.stringify(product) != '{}'">
    <div class="middle topBox">
      <!-- 左侧走马灯 -->
      <div class="productCarousel">
        <el-carousel
          ref="carouselRef"
          class=""
          indicator-position="outside"
          height="500px"
        >
          <el-carousel-item
            v-for="(image, index) in product.storeInfo.slider_image"
            :key="index"
          >
            <img :src="image" alt="产品图片" class="productImage" />
          </el-carousel-item>
        </el-carousel>
        <div class="tips">
          {{ $t("productDetail.tips") }}
        </div>
      </div>

      <!-- 右侧产品信息 -->
      <div class="productInfo">
        <h2 class="productTitle">
          {{
            locale === "zh-cn"
              ? product.storeInfo.store_name
              : product.storeInfo.en_store_name
          }}
        </h2>
        <div class="productPrice">
          <div class="leftPrice">
            <div class="promotion">
              <div class="rate" v-if="product.storeInfo.keyword">
                {{ product.storeInfo.keyword }}
              </div>
              <div class="orignalPrice">
                {{ $t("productDetail.ori") }}：{{
                  product.productAttr.length > 0
                    ? product.productValue[attrs.join(",")].ot_price
                    : product.storeInfo.ot_price
                }}
              </div>
            </div>
            <div class="price">
              ￥{{
                product.productAttr.length > 0
                  ? product.productValue[attrs.join(",")].price
                  : product.storeInfo.price
              }}
            </div>
            
          </div>

          <div class="rightNum">
            {{ $t("productDetail.saleNum") }}：{{ product.storeInfo.ficti }}
          </div>
        </div>

        <!-- 优惠券 -->
        <div class="couponSelection" v-if="locale === 'zh-cn'">
          <div class="sectionTitle">{{ $t("productDetail.coump") }}</div>
          <div class="options">
            <div class="option" v-for="coupon in product.coupons" :key="coupon">
              <span class="name"
                >{{ coupon.coupon_title }} 满{{ coupon.use_min_price }}减{{
                  coupon.coupon_price
                }}</span
              >
              <span class="draw" @click="receiveCoupon(coupon.id)">{{
                $t("productDetail.get")
              }}</span>
            </div>
          </div>
        </div>

        <!-- 数量 -->
        <div class="couponSelection">
          <div class="sectionTitle">{{ $t("productDetail.num") }}</div>
          <div class="options">
            <el-input-number v-model="num" :min="1" />
          </div>
        </div>

        <!-- 颜色选择 -->
        <div class="colorSelection" style="margin-top: 10px; display: none">
          <div class="sectionTitle">{{ $t("productDetail.color") }}</div>
          <div class="options">
            <div
              class="option"
              :class="{ active: selectedColor === color }"
              v-for="color in colors"
              :key="color"
              @click="selectColor(color)"
            >
              {{ color }}
            </div>
          </div>
        </div>

        <!-- 尺寸选择 -->
        <div class="sizeSelection" style="display: none">
          <div class="sectionTitle">{{ $t("productDetail.size") }}</div>
          <div class="options">
            <div
              class="option"
              :class="{ active: selectedSize === size }"
              v-for="size in sizes"
              :key="size"
              @click="selectSize(size)"
            >
              {{ size }}
            </div>
          </div>
        </div>

        <!-- 规格选择 -->
        <div
          class="sizeSelection"
          v-for="(item, index) in product.productAttr"
          :key="index"
        >
          <div class="sectionTitle">{{ item.attr_name == '颜色' ? $t("productDetail.color") : item.attr_name == '尺寸' ? $t("productDetail.size") : item.attr_name }}</div>
          <div class="options">
            <div
              class="option"
              :class="{ active: attrs[index] === oitem.attr }"
              v-for="(oitem, oindex) in item.attr_value"
              :key="oindex"
              @click="selectAttr(index, oitem)"
            >
              {{ oitem.attr }}
            </div>
          </div>
        </div>

        <!-- 操作部分 -->
        <div class="operateBox" v-if="locale === 'zh-cn'">
          <div class="btnBox">
            <el-button type="primary" @click="isLogined() && addToCart()">
              <el-icon :size="20" style="margin-right: 10px"> <ShoppingCart /> </el-icon
              >{{ $t("productDetail.addCar") }}</el-button
            >
            <el-button type="primary" plain @click="isLogined() && buyNow()">{{
              $t("productDetail.buyNow")
            }}</el-button>
          </div>

          <div class="bottomBtn" v-if="locale === 'zh-cn'">
            <div class="smallBtn">
              <div
                class="iconBox"
                :class="{ isIn: inCollection(product), notIn: !inCollection(product) }"
                @click.stop="
                  isLogined() &&
                    (inCollection(product)
                      ? delCollection(product)
                      : addCollection(product))
                "
              >
                <svg
                  t="1733831108601"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2407"
                  width="24"
                  height="24"
                >
                  <path
                    d="M224 992 544 704 864 992 864 95.744C864 60.736 835.488 32 800.288 32L287.712 32C252.736 32 224 60.544 224 95.744L224 992Z"
                    p-id="2408"
                    :fill="inCollection(product) ? '#ffffff' : '#000000'"
                  ></path>
                </svg>
              </div>
              <div class="name">
                {{
                  inCollection(product)
                    ? $t("productDetail.collected")
                    : $t("productDetail.collection")
                }}
              </div>
            </div>
            <div class="smallBtn" @click="jumpTo('/inquiry?id=' + id)">
              <div class="iconBox">
                <svg
                  t="1733831289758"
                  class="icon"
                  viewBox="0 0 1051 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3564"
                  width="20"
                  height="20"
                >
                  <path
                    d="M55.351351 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0z m763.101406 211.552865A137.852541 137.852541 0 0 1 774.918919 664.326919v-110.924108A138.378378 138.378378 0 0 1 912.328649 415.135135C898.131027 214.071351 730.499459 55.351351 525.837838 55.351351 321.148541 55.351351 153.544649 214.071351 139.347027 415.135135A138.461405 138.461405 0 0 1 276.756757 553.402811v110.924108a138.378378 138.378378 0 0 1-276.756757 0v-110.924108a138.378378 138.378378 0 0 1 83.303784-126.865297C91.883243 189.523027 286.72 0 525.837838 0s433.954595 189.523027 442.534054 426.537514A138.461405 138.461405 0 0 1 1051.675676 553.402811v110.924108a138.378378 138.378378 0 0 1-184.790487 130.269405 470.763243 470.763243 0 0 1-188.858811 121.21946A96.809514 96.809514 0 0 1 580.912432 1010.162162h-82.528864c-53.690811 0-97.113946-43.174054-97.113946-96.864865 0-53.607784 43.284757-96.864865 97.141621-96.864865h82.473514c34.954378 0 65.536 18.265946 82.639567 45.803244a415.273514 415.273514 0 0 0 154.900757-97.28zM830.27027 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0zM498.438919 954.810811h82.473513c23.302919 0 41.79027-18.487351 41.790271-41.513514 0-23.053838-18.570378-41.513514-41.790271-41.513513h-82.473513c-23.302919 0-41.79027 18.487351-41.79027 41.513513 0 23.053838 18.570378 41.513514 41.79027 41.513514z"
                    fill="#ffffff"
                    p-id="3565"
                  ></path>
                </svg>
              </div>
              <div class="name" @click="jumpTo('/inquiry?id=' + id)">
                {{ $t("productDetail.inquiry") }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tabBox">
      <div class="middle">
        <div class="menuList">
          <div class="item" :class="{ active: menuActive === 0 }" @click="changeMenu(0)">
            {{ $t("产品详情") }}
          </div>
          <div class="item" :class="{ active: menuActive === 1 }" @click="changeMenu(1)">
            {{ $t("优品推荐") }}
          </div>
          <div class="item" :class="{ active: menuActive === 2 }" @click="changeMenu(2)">
            {{ $t("全部评论") }}
          </div>
          <div class="item" :class="{ active: menuActive === 3 }">
            {{ $t("手机购买") }}
            <el-icon>
              <CaretBottom />
            </el-icon>

            <div class="erCode">
              <img src="../../assets/img/erwei.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="contentBox middle">
      <div
        class="content"
        v-html="
          locale === 'zh-cn'
            ? product.storeInfo.description
            : product.storeInfo.en_description
        "
        v-show="menuActive === 0"
      ></div>
      <div class="content" v-show="menuActive === 1">
        <div class="productList">
          <div
            class="item"
            v-for="item in recommendedProductList"
            :key="item.id"
            @click="jumpTo('/productDetail?id=' + item.id)"
          >
            <div class="promotionInfo">
              {{ $t("productDetail.promotion")
              }}{{ parseInt(((item.ot_price - item.price) / item.price) * 100) }}%
            </div>
            <div class="coverBox">
              <img :src="item.image" alt="" />
            </div>
            <div class="productInfo">
              <div class="name">{{ item.store_name }}</div>
              <div class="price">￥{{ product.price }}</div>
            </div>

            <div class="btnBox" v-if="locale === 'zh-cn'">
              <div
                class="btn"
                :class="{ isIn: item.isInCar }"
                @click="jumpTo('/productDetail?id=' + item.id)"
              >
                <el-icon :size="20">
                  <ShoppingCart />
                </el-icon>
              </div>
              <div
                class="btn"
                :class="{ isIn: inCollection(item) }"
                @click.stop="
                  isLogined() &&
                    (inCollection(item) ? delCollection(item) : addCollection(item))
                "
              >
                <el-icon :size="20">
                  <CollectionTag />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-show="menuActive === 2" class="comment content" v-if="replyInfo !== null">
        <div class="comment-hd">
          <div class="acea-row row-between-wrapper">
            <div class="rate">
              <span>{{ replyInfo.reply_chance }}%</span><span>{{ $t('满意') }}</span>
            </div>
            <div class="acea-row row-middle score">
              {{ $t('评分') }}
              <div class="cont">
                <span
                  v-for="(v, i) in 5"
                  :key="i"
                  :class="{ on: i + 1 <= replyInfo.reply_star }"
                  class="iconfont icon-pingjia"
                ></span>
              </div>
            </div>
          </div>
          <div class="menu">
            <div
              class="item"
              :class="{ on: reply.type === 0 }"
              @click="replyTypeChange(0, replyInfo.sum_count)"
            >
              {{ $t('全部') }}({{ replyInfo.sum_count }})
            </div>
            <div
              class="item"
              :class="{ on: reply.type === 1 }"
              @click="replyTypeChange(1, replyInfo.good_count)"
            >
              {{ $t('好评') }}({{ replyInfo.good_count }})
            </div>
            <div
              class="item"
              :class="{ on: reply.type === 2 }"
              @click="replyTypeChange(2, replyInfo.in_count)"
            >
              {{ $t('中评') }}({{ replyInfo.in_count }})
            </div>
            <div
              class="item"
              :class="{ on: reply.type === 3 }"
              @click="replyTypeChange(3, replyInfo.poor_count)"
            >
              {{ $t('差评') }}({{ replyInfo.poor_count }})
            </div>
          </div>
        </div>
        <div class="comment-bd">
          <template v-if="replyList.length">
            <div v-for="item in replyList" :key="item.id" class="item">
              <div class="acea-row row-middle item-hd">
                <div class="image">
                  <img :src="item.avatar" />
                </div>
                <div class="text">
                  <div class="acea-row row-middle name">
                    {{ item.nickname }}
                    <div class="star">
                      <span
                        v-for="(v, i) in 5"
                        :key="i"
                        class="iconfont icon-pingjia"
                        :class="{ on: i + 1 <= item.star }"
                      ></span>
                    </div>
                  </div>
                  <div>{{ item.add_time }}</div>
                </div>
              </div>
              <div class="item-bd">
                <div>{{ item.comment }}</div>
                <div class="image-wrapper">
                  <div
                    v-for="(itm, idx) in item.pics"
                    :key="idx"
                    class="image"
                    @click="isDialog = true"
                  >
                    <el-image
                      style="width: 54px; height: 54px"
                      :src="itm"
                      :preview-src-list="item.pics"
                    ></el-image>
                  </div>
                </div>
                <div v-if="item.merchant_reply_content" class="reply">
                  <div class="item">
                    <span>{{ $t('店小二') }}：</span>{{ item.merchant_reply_content }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <img v-else-if="!reply.loading" src="/img/noEvaluate.png" />
        </div>
        <div v-if="replyList.length" class="acea-row row-right">
          <el-pagination
            layout="prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            :page-size="reply.limit"
            :total="replyCount"
            @current-change="callPaginate"
            @prev-click="callPaginate"
            @next-click="callPaginate"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.price {
  font-size: 20px;
  font-weight: bold;
}
.productPage {
  margin-top: 70px;

  .topBox {
    display: flex;
    margin-bottom: 30px;

    .productCarousel {
      width: 1250px;
      margin-right: 40px;

      img {
        height: 100%;
        width: auto;
        margin: 0 auto;
        display: block;
      }
    }

    .productInfo {
      width: 500px;

      .productTitle {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: bold;
      }

      .productPrice {
        font-size: 20px;
        margin: 10px 0;
        display: flex;
        align-items: end;
        justify-content: space-between;

        .leftPrice {
          .promotion {
            display: flex;
            font-size: 12px;
            margin-top: 5px;

            .rate {
              background-color: rgb(21, 97, 151);
              color: #fff;
              padding: 5px 10px;
              margin-right: 15px;
            }

            .orignalPrice {
              color: #999;
              padding: 5px 0;
              text-decoration: line-through;
            }
          }
        }

        .rightNum {
          font-size: 12px;
          color: #666;
        }
      }

      .productSales {
        margin-bottom: 15px;
      }

      .colorSelection,
      .sizeSelection {
        margin-top: 22px;

        .sectionTitle {
          font-size: 14px;
          // font-weight: bold;
          margin-bottom: 10px;
        }

        .options {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;

          .option {
            padding: 5px 10px;
            border: 1px solid #ccc;
            cursor: pointer;
            font-size: 14px;
            text-align: center;
            margin-bottom: 0px;
            width: calc(25% - 30px / 4);
            /* 移除圆角 */
            border-radius: 0;

            &.active {
              // border-color: black;
              // font-weight: bold;
              background-color: #000;
              color: #fff;
            }

            &:hover {
              border-color: gray;
            }
          }
        }
      }

      .couponSelection {
        margin-top: 22px;

        .sectionTitle {
          font-size: 14px;
          // font-weight: bold;
          margin-bottom: 10px;
        }

        .options {
          display: flex;
          font-size: 14px;
          flex-wrap: wrap;

          .option {
            border: 1px solid #333;
            padding: 5px 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            width: calc(50% - 5px);

            .name {
              margin: 0 10px;
              // width: 42px;
            }

            &:nth-of-type(2n) {
              margin-right: 0;
            }

            .draw {
              cursor: pointer;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .operateBox {
    margin-top: 50px;

    .el-button {
      height: 40px;
      width: 188px;
    }
  }

  .bottomBtn {
    display: flex;
    margin-top: 32px;

    .smallBtn {
      display: flex;
      margin-right: 30px;
      cursor: pointer;

      .iconBox {
        background-color: #000;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        text-align: center;

        .icon {
          margin-top: 10px;
        }
      }

      .iconBox.isIn {
        background-color: #000;
        border: none;
      }
      .iconBox.notIn {
        background-color: #fff;
        border: 1px solid #000;
      }
    }

    .name {
      line-height: 40px;
      font-size: 14px;
      font-weight: bold;
      margin-left: 10px;
      min-width: 42px;
    }
  }

  .tabBox {
    width: 100%;
    // height: 60px;
    background-color: #f6f6f6;

    .menuList {
      display: flex;
      justify-content: center;
      padding: 12px 0;

      .item {
        height: 44px;
        line-height: 40px;
        margin: 0 8px;
        text-align: center;
        width: 150px;
        font-size: 16px;
        cursor: pointer;
        position: relative;
        border: 2px solid transparent;

        &.active {
          position: relative;

          // &::after {
          //   content: "";
          //   width: 100%;
          //   height: 6px;
          //   background-color: #000;
          //   position: absolute;
          //   bottom: 0;
          //   left: 0;
          // }
          border: 2px solid #616265;
        }

        .erCode {
          width: 140px;
          height: 140px;
          background-color: #fff;
          border: 1px solid #dcdcdc;
          border-top: 0;
          opacity: 0;
          visibility: hidden;
          position: absolute;
          left: 0;
          top: 56px;
          transition: .5s all;

          img {
            width: 100%;
            height: 100%;
          }
        }

        &:last-child:hover {
          .erCode {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }

  .content {
    margin-top: 30px;
    // background-color: rgb(237, 237, 237);
  }

  ::v-deep .content img {
    width: 100%;
  }
}

.productList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;

  .item {
    width: 325px;
    padding-bottom: 65px;
    cursor: pointer;
    transition: 0.5s all;
    position: relative;

    &:hover {
      box-shadow: 0px 0px 4px 1px #c5c5c54f;

      .promotionInfo {
        display: block;
      }

      .btnBox {
        display: flex;
      }
    }

    .coverBox {
      width: 200px;
      height: 200px;
      margin: 30px auto 20px auto;
      user-select: none;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .promotionInfo {
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px 10px;
      background-color: #156197;
      color: #fff;
      transition: 0.5s all;
    }

    .productInfo {
      margin-top: 10px;

      .name {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
      }

      .price {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        margin-top: 10px;
      }
    }

    .btnBox {
      display: none;
      transition: 0.5s all;
      position: absolute;
      justify-content: center;
      width: 100%;
      margin-top: 10px;

      .btn {
        width: 35px;
        height: 35px;
        background-color: #fff;
        color: #000;
        border: 1px solid #000;
        border-radius: 35px;
        // line-height: 40px;
        font-size: 35px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:first-child {
          margin-right: 10px;
        }

        .el-icon {
          margin: auto;
        }

        &.isIn {
          background-color: #000;
          color: #fff;
          border: 1px solid #000;
        }
      }
    }
  }
}

// 新增样式！！！！！

/* layout */
.acea-row {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* 辅助类 */
}
.acea-row.row-middle {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.acea-row.row-top {
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.acea-row.row-bottom {
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.acea-row.row-center {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.acea-row.row-right {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -o-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.acea-row.row-left {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.acea-row.row-between {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.acea-row.row-around {
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
.acea-row.row-column-around {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
.acea-row.row-column {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.acea-row.row-column-between {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
/* 上下左右垂直居中 */
.acea-row.row-center-wrapper {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
/* 上下两边居中对齐 */
.acea-row.row-between-wrapper {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.comment {
  margin-top: 0 !important;
  .comment-hd {
    padding-top: 30px;
    padding-bottom: 30px;

    .rate {
      font-size: 0;

      span {
        font-size: 14px;
        color: #000;

        ~ span {
          margin-left: 5px;
        }
      }
    }

    .score {
      font-size: 14px;
      color: #7e7e7e;

      .cont {
        margin-left: 8px;
      }

      .iconfont {
        font-size: 12px;
        color: #e6e6e6;

        ~ .iconfont {
          margin-left: 5px;
        }

        &.on {
          color: #fde055;
        }
      }
    }

    .menu {
      margin-top: 20px;
      font-size: 0;

      .item {
        display: inline-block;
        width: 86px;
        height: 34px;
        border-radius: 2px;
        background-color: #f7f7f7;
        font-size: 14px;
        line-height: 34px;
        text-align: center;
        color: #282828;
        cursor: pointer;

        &:hover {
          color: #000;
        }

        &.on {
          background-color: #000;
          color: #ffffff;
        }

        ~ .item {
          margin-left: 14px;
        }
      }
    }
  }

  .comment-bd {
    > img {
      width: 200px;
      margin: 50px auto;
    }

    .item {
      padding-top: 20px;
      padding-bottom: 20px;

      .item-hd {
        .image {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
        }

        img {
          display: block;
          width: 100%;
          height: 100%;
        }

        .text {
          flex: 1;
          margin-left: 12px;
          font-size: 14px;
          color: #868686;
        }

        .name {
          margin-bottom: 4px;
          font-size: 16px;
          color: #282828;
        }

        .star {
          margin-left: 12px;
          font-size: 0;
        }

        .iconfont {
          font-size: 12px;
          color: #e6e6e6;

          &.on {
            color: #fde055;
          }

          ~ .iconfont {
            margin-left: 5px;
          }
        }
      }

      .item-bd {
        padding-bottom: 20px;
        border-bottom: 1px solid #e3e3e3;
        margin-left: 52px;
        font-size: 14px;
        color: #282828;

        > div {
          margin-top: 15px;
        }

        .image-wrapper {
          font-size: 0;
        }

        .image {
          display: inline-block;
          width: 54px;
          height: 54px;
          margin-right: 8px;
          margin-bottom: 10px;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .reply {
          background-color: #f7f7f7;

          .item {
            padding: 7px 12px;
            font-size: 14px;
            color: #282828;

            span {
              color: #e93323;
            }
          }
        }
      }
    }
  }
}

.tips {
  color: rgba(108, 108, 108, 1);
  font-size: 14px;
  line-height: 20px;
  margin-top: 50px;
  text-align: center;
  font-weight: bold;
  max-width: 480px;
  margin: 50px auto 0 auto;
}

::v-deep .el-button span{
  font-size: 16px !important;
}
</style>
